<template>
    <div>
        <div class="tongji">

            <div class="top">

                <div class="logo">
                    <img src="../assets/img/tongjilogo.png">
                </div>
                <div class="title">
                    <span>大数据分析后台管理</span>
                </div>

            </div>
            
            <div class="bottom">

                <div class="left">
                    <div class="content">
                        <div class="title">办公室数据</div>
                        <div class="title-tab">
                            <div>办公室</div>
                            <div>客户</div>
                            <div>案件</div>
                            <div>人数</div>
                        </div>
                        <div class="anli-list">
                            <div class="list" v-for="item in fensuo" :key="item.Id" @click="updinfo(item.Id)">
                                <div>{{item.Org_Name}}</div>
                                <div>{{item.customerNumber}}</div>
                                <div>{{item.caseNumber}}</div>
                                <div>{{item.lawyerNumber}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 左侧 -->

                <div class="middle">
                    <div class="content">

                        <div class="top-details">
                            <div class="tab">
                                <span class="title">总案件数</span>
                                <span class="num">{{zongshu.caseAllnumber}}</span>
                            </div>
                            <div class="tab">
                                <span class="title">本月案件</span>
                                <span class="num">{{zongshu.casemonthNumber}}</span>
                            </div>
                            <div class="tab">
                                <span class="title">客户数量</span>
                                <span class="num">{{zongshu.customerAllnumber}}</span>
                                <div class="kehunum">
                                    <p>企业:{{zongshu.personalCustomerNumber}}</p>
                                    <p>个人:{{zongshu.enterpriseCustomerNumber}}</p>
                                </div>
                            </div>
                            <div class="tab">
                                <span class="title">律师人数</span>
                                <span class="num">{{zongshu.lawyerAllnumber}}</span>
                            </div>
                        </div>
                        
                        <div class="charts">
                            <div class="charts-content" @click="goto('/index/tongjikehu')"><div class="charts-pa">
                                <div class="title">客户</div>
                                <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart2"></div>    

                            </div></div>

                            <div class="charts-content" ><div class="charts-pa">
                                <div class="title">行业</div>
                                <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart5"></div>

                            </div></div>

                            <div class="charts-content"@click="goto('/index/tongjianjian')" ><div class="charts-pa">
                                <div class="title">案件</div>
                                <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart3"></div> 
                            </div></div>
                            
                            <div class="charts-content"><div class="charts-pa">
                                <div class="title">类型</div>
                                <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart6"></div>
                            </div></div>

                            <div class="charts-content" @click="goto('/index/tongjilvshi')"><div class="charts-pa">
                                <div class="title">律师</div>
                                <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart4"></div> 
                            </div></div>

                            <div class="charts-content"><div class="charts-pa">
                                <div class="title">部门</div>
                                <div :class="className" :id="id" :style="{height:height,width:width}" ref="myEchart7"></div>                               
                            </div></div>

                        </div>
                    </div>
                </div>
                <!-- 右侧 -->

                <div class="right">

                    <div class="notice">
                        <div class="title">公告</div>

                        <div class="list">
                            <swiper ref="mySwiper" :options="swiperOptions">
                                <swiper-slide v-for="item in gonggao" :key="item.Id">

                                    <div class="sw-list" v-for="v in item" :key="v.Id">
                                        <div>{{v.date}}</div>
                                        <div>{{v.content}}</div>
                                        <div>{{v.time}}</div> 
                                    </div>
                                </swiper-slide>

                            </swiper>
                        </div>
                    </div>

                    <div class="dynamic">
                        <div class="title">最新客户动态</div>
                        <div class="list">
                            <swiper ref="mySwiper" :options="swiperOptions2">

                                <swiper-slide v-for="item in kehudt" :key="item.Id">
                                    <div class="sw-list" v-for="v in item" :key="v.Id">
                                        <div>{{v.date}}</div>
                                        <div>{{v.customerName}}</div>
                                        <div>{{v.Staff_Name}}</div> 
                                    </div>
                                </swiper-slide>

                                

                            </swiper>
                        </div>
                    </div>

                    <div class="dynamic">
                        <div class="title">最新案件动态</div>
                        <div class="list">
                            <swiper ref="mySwiper" :options="swiperOptions2">
                                <swiper-slide v-for="item in anjiandt" :key="item.Id">
                                        <div class="sw-list" v-for="v in item" :key="v.Id">
                                            <div>{{v.date}}</div>
                                            <div>{{v.Case_Name}}</div>
                                            <div>{{v.Staff_Name}}</div> 
                                        </div>
                                </swiper-slide>
                            </swiper>
                        </div>
                    </div>

                    <div class="dynamic">
                        <div class="title">最新律师动态</div>
                        <div class="list">
                            <swiper ref="mySwiper" :options="swiperOptions2">
                            <swiper-slide v-for="item in lvshidt" :key="item.Id">
                                <div class="sw-list" v-for="v in item" :key="v.Id">
                                    <div>{{v.date}}</div>
                                    <div>{{v.Org_Name}}</div>
                                    <div>{{v.Staff_Name}}</div> 
                                </div>
                            </swiper-slide>
                            </swiper>
                        </div>
                    </div>

                
            </div>
                   

                    
        

                
            </div>
        </div>
    </div>
</template>
<script>
import qs from 'qs';
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import echarts from 'echarts'
import 'swiper/css/swiper.css'
export default {
    props: {
    className: {
      type: String,
      default: 'echartDiv'
    },
    id: {
      type: String,
      default: 'yourID'
    },
    width: {
      type: String,
      default: '40vh'
    },
    height: {
      type: String,
      default: '22vh'
    }
  },
    data(){
        return{
            swiperOptions: {
                loop:true,
                observer:true,
                observeParents:true,
                observeSlideChildren:true,
                direction: 'vertical',
                autoplay: {
                    delay:3000,
                    //设置触碰后是否停止自动播放
                    disableOnInteraction:false
                },
            // Some Swiper option/callback...
            },
            swiperOptions2: {
                loop:true,
                observer:true,
                observeParents:true,
                observeSlideChildren:true,
                direction: 'vertical',
                autoplay: {
                    delay:3000,
                    //设置触碰后是否停止自动播放
                    disableOnInteraction:false
                },
            // Some Swiper option/callback...
            },

            fensuo:[],
            zongshu:"",
            gonggao:'',

            kehudt:'',
            anjiandt:'',
            lvshidt:'',

            chart2:'',
            chart3:'',
            chart4:'',
            chart5:'',
            chart6:'',
            chart7:'',

            orgId:0

            

        }  
    },
    
    methods:{
        goto(url){
            this.$router.push(url)
        },
        updinfo(id){
            this.orgId = id
            this.getBranchOfficedata()
            this.getStatisticsnumber()
            this.getCustomerdynamic()

            this.getCasedynamic()
            this.getLawyerdynamic()

            this.initChart2()
            this.initChart3()
            this.initChart4()
            this.initChart5()
            this.initChart6()
            this.initChart7()
        },
        getBranchOfficedata(){
            this.$http.post('/yongxu/Statistics/getBranchOfficedata',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.fensuo = res.data.data
                
            })
        },
        getStatisticsnumber(){
            this.$http.post('/yongxu/Statistics/getStatisticsnumber',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.zongshu = res.data
            })
        },
        getNotice(){
            this.$http.post('/yongxu/Statistics/getNotice').then((res)=>{
                this.gonggao = res.data.data
            })
        },
        getCustomerdynamic(){
            this.$http.post('/yongxu/Statistics/getCustomerdynamic',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.kehudt = res.data.data
            })
        },
        getCasedynamic(){
            this.$http.post('/yongxu/Statistics/getCasedynamic',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.anjiandt = res.data.data
            })
        },
        getLawyerdynamic(){
            this.$http.post('/yongxu/Statistics/getLawyerdynamic',qs.stringify({orgId:this.orgId})).then((res)=>{
                this.lvshidt = res.data.data
            })
        },
        initChart2(){
            this.$http.get('/yongxu/Statistics/getCasetypepie',{params:{orgId:this.orgId}}).then((res)=>{
                this.chart2 = echarts.init(this.$refs.myEchart2);
                this.chart2.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '80%',
                            center: ['50%', '60%'],
                            data: res.data.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
                                            
            })
        },
        initChart3(){
            this.$http.get('/yongxu/Statistics/getCasetypepie',{params:{orgId:this.orgId}}).then((res)=>{
                
                this.chart3 = echarts.init(this.$refs.myEchart3);
                this.chart3.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '80%',
                            center: ['50%', '60%'],
                            data: res.data.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
                                            
            })
        },
        initChart4(){
            this.$http.get('/yongxu/Statistics/getLawyerpie',{params:{orgId:this.orgId}}).then((res)=>{
               
                this.chart4 = echarts.init(this.$refs.myEchart4);
                this.chart4.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '80%',
                            center: ['50%', '60%'],
                            data: res.data.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
                                            
            })
        },
        initChart5(){
            this.$http.get('/yongxu/Statistics/getCustomerindustrybar',{params:{orgId:this.orgId}}).then((res)=>{
                console.log(res.data)
                this.chart5 = echarts.init(this.$refs.myEchart5);
                this.chart5.setOption({
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: res.data.xAxis.data,
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#fff'
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel : {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#fff'
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '直接访问',
                                type: 'bar',
                                barWidth: '60%',
                                data: res.data.yAxis.data
                            }
                        ] 
                })
                                            
            })
        },
        initChart6(){
            this.$http.get('/yongxu/Statistics/getCasetypebar',{params:{orgId:this.orgId}}).then((res)=>{
               
                this.chart6 = echarts.init(this.$refs.myEchart6);
                this.chart6.setOption({
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: res.data.xAxis.data,
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#fff'
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel : {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#fff'
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '直接访问',
                                type: 'bar',
                                barWidth: '60%',
                                data: res.data.yAxis.data
                            }
                        ] 
                })
                                            
            })
        },
        initChart7(){
            this.$http.get('/yongxu/Statistics/getLawyerbar',{params:{orgId:this.orgId}}).then((res)=>{
                
                this.chart7 = echarts.init(this.$refs.myEchart7);
                this.chart7.setOption({
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: res.data.xAxis.data,
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#fff'
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisLabel : {
                                    formatter: '{value}',
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#fff'
                                    }
                                }
                            }
                        ],
                        series: [
                            {
                                name: '直接访问',
                                type: 'bar',
                                barWidth: '60%',
                                data: res.data.yAxis.data
                            }
                        ] 
                })
                                            
            })
        },
    },
    created(){
        this.getBranchOfficedata()
        this.getStatisticsnumber()
        this.getNotice()
        this.getCustomerdynamic()

        this.getCasedynamic()
        this.getLawyerdynamic()

        this.initChart2()
        this.initChart3()
        this.initChart4()
        this.initChart5()
        this.initChart6()
        this.initChart7()
    },
    mounted(){
        
    },
    computed:{
        
    },
    components:{
        Swiper,
        SwiperSlide
    },
    directives: {
        swiper: directive
    }
}
</script>

<style lang="scss" scoped>
.tongji{
    width: 100%;
    height: calc(100vh);
    background: #000024;
}
.top{
    width: 100%;
    height: calc(10vh);
    display: flex;
    flex-direction:row;
    justify-content:center;
    .logo{
        position: fixed;
        top:15px;
        left: 30px;
        width: 80px;
        height: 80px;
        img{
            width: 80px;
            height: 80px;
        }
    }
    .title{

        span{
            display: block;
            font-size: 22px;
            color:#3ED9D1;
            line-height: calc(10vh);
            letter-spacing: 15px;
            padding:0 30px;
            background: url(../assets/img/444.png) no-repeat center center;
            background-size: 100%;
            width: 450px;
            text-align: center;
        }
    }
}
.bottom{
    width: 100%;
    height: calc(90vh);
    display: flex;
    flex-direction:row;
    justify-content:space-around;
    box-sizing: border-box;
    .left{
        height: calc(90vh);
        width: 35%;
        padding:10px;
        box-sizing: border-box;
        .content{
            background: #29323B;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                text-align: center;
                padding-top:3vh;
                letter-spacing: 5px;
            }
            .title-tab{
                padding:0 20px;
                box-sizing: border-box;
                width: 100%;
                display: flex;
                flex-direction:row;
                justify-content:space-around;
                color:#fff;
                margin-top:20px;
                font-size: 14px;
                div{
                    width: 50px;
                    text-align: center;
                }
            }
            .anli-list{
                padding:0 20px;
                .list{
                    background: #343C45;
                    display: flex;
                    flex-direction:row;
                    justify-content:space-around;
                    color:#fff;
                    padding:7px 0;
                    border-radius: 5px;
                    margin-top:10px;
                    div{
                        width: 90px;
                        text-align: center;
                    }
                }
            }
        }
    }
    // 左侧
    .middle{
        height: calc(90vh);
        flex-grow:1;
        padding:10px;
        box-sizing: border-box;
        .top-details{
            width: 100%;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
            .tab{
                width: 23%;
                height: 10vh;
                border-radius: 5px;
                display: flex;
                flex-direction:column;
                color: #fff;
                padding:13px;
                box-sizing: border-box;
                .num{
                    text-align: center;
                    font-size: 24px;
                    font-weight: bold;
                    letter-spacing: 3px;
                    margin-top:7px;
                }

            }
            .tab:nth-child(1){
                background: #2C62E6;
            }
            .tab:nth-child(2){
                background: #0DD396;
            }
            .tab:nth-child(3){
                background: #F19149;
                p{
                    display: block;
                    width: 50%;
                    float: left;
                    color:#fff
                }
                p:nth-child(2){
                    text-align: right;
                }
            }
            .tab:nth-child(4){
                background: #FE5E80;
            }
        }
    }
    // 中间
    .right{
        width: 25%;
        padding:10px;
        box-sizing: border-box;
        height: calc(90vh);
        .notice{
            height: 10vh;
            background: #29323B;
            border-radius: 5px;
            padding:5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 6vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:space-between;
                    margin-bottom:1vh;
                }
            }
        }
        // 公告
        .dynamic{
            height: 24vh;
            margin-top: 2vh;
            background: #29323B;
            border-radius: 5px;
            padding: 5px 15px;
            box-sizing: border-box;
            .title{
                color:#3ED9D1;
                font-size: 18px;
                margin-top:1vh;
            }
            .list{
                color:#fff;
                .swiper-container{
                    height: 16vh;
                    margin-top:1.2vh;
                }
                .sw-list{
                    display: flex;
                    justify-content:flex-start;
                    margin-bottom:1vh;
                    div{
                        margin-right:2vh;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    div:nth-child(1){
                        width: 20%;
                    }
                    div:nth-child(2){
                        width: 60%;
                    }
                    div:nth-child(3){
                        width: 20%;
                    }
                }
            }
        }
        // 动态
    }
}


.charts{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    .charts-content{
        width: 49%;
        height: 24vh;
        margin-top:2vh;
        
        box-sizing: border-box;
    }
    .charts-pa{
        background: #29323B;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        padding: 5px 15px;
        box-sizing: border-box;
        position: relative;
        .title{
            color:#3ED9D1;
            font-size: 18px;
            position: absolute;
            top:10px;
        }
        .echartDiv{
            margin:0 auto;
        }
    }
}


// 29323B
</style>

